<template>
	<!-- 科学洗涤 -->
	<div class="box">
		<!-- 头图 -->
		<div class="topImg-w">
			<div class="topzi-w" style="">科学洗涤</div>
			<img
				src="http://www.bluemoon.com.cn/_nuxt/img/banner.bc7290f.jpg"
				alt=""
			/>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 选项栏 -->
			<div class="bar">
				<ul class="nav">
					<li v-on:click="kai = 1" :class="kai === 1 ? `active` : ''">
						轻松洗涤
					</li>
					<li v-on:click="kai = 2" :class="kai === 2 ? `active` : ''">
						科学防疫
					</li>
					<li v-on:click="kai = 3" :class="kai === 3 ? `active` : ''">
						洁净科普
					</li>
				</ul>
				<div class="search">
					<div class="search_box">
						<i class="icon_search"></i>
						<input type="search" placeholder="搜索关键字搜索洗涤方法" />
					</div>
					<div class="search_btn"><span>搜索</span></div>
				</div>
			</div>
			<div class="list">
				<div v-show="kai === 1" class="list1 listyong">
					<div class="wash_list">轻松洗涤</div>
					<div class="wash_content">
						<div v-for="item in list1" :key="item.id" class="ti">
							<div class="ti_zi">
								<div class="ti_zi_c">
									{{ item.txt }}
								</div>
							</div>
							<img :src="item.src" alt="" />
						</div>
					</div>
				</div>
				<div v-show="kai === 2" class="list2 listyong">
					<div class="wash_list">科学防疫</div>
					<div class="wash_content">
						<div v-for="item in list2" :key="item.id" class="ti">
							<div class="ti_zi">
								<div class="ti_zi_c">
									{{ item.txt }}
								</div>
							</div>
							<img :src="item.src" alt="" />
						</div>
					</div>
				</div>
				<div v-show="kai === 3" class="list3 listyong">
					<div class="wash_list">洁净科普</div>
					<div class="wash_content">
						<div v-for="item in list3" :key="item.id" class="ti">
							<div class="ti_zi">
								<div class="ti_zi_c">
									{{ item.txt }}
								</div>
							</div>
							<img :src="item.src" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			kai: 1,
			list1: [
				{
					id: 1,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604287114401_%E8%A1%A3%E6%9C%8D%E4%B8%8A%E7%9A%84%E6%B2%B9%E6%B8%8D.jpg',
					txt: '衣服上的油渍如何清洗干净？',
				},
				{
					id: 2,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604300782102_858-%E6%8D%A2%E5%AD%A3.png',
					txt: '发黄的白衬衫衣领如何清洗干净？',
				},
				{
					id: 3,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604298301247_857-%E5%A6%82%E4%BD%95.png',
					txt: '如何让白色衣服多次洗涤后亮丽如新？',
				},
				{
					id: 4,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604300348107_%E5%B0%81%E9%9D%A2%20%E5%8E%9A%E8%A1%A3%E6%9C%8D.jpg',
					txt: '换季厚衣服收纳，如何防止来年衣服发黄、发霉？',
				},
			],
			list2: [
				{
					id: 5,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604286438610_854%E3%80%90%E9%98%B2%E7%96%AB.png',
					txt: '【防疫必看】莫慌！新型冠状病毒防护攻略来了！',
				},
				{
					id: 6,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604286134475_852%E3%80%90%E9%98%B2%E7%96%AB.png',
					txt: '【防疫必看】切断传播途径！疫情防护清洁指南',
				},
				{
					id: 7,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604285631991_853%E3%80%90%E9%98%B2%E7%96%AB.png',
					txt: '【防疫必看】科学洗手，守护健康',
				},
			],
			list3: [
				{
					id: 8,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604282298676_1%20%E8%8D%A7%E5%85%89%E5%A2%9E%E7%99%BD.jpg',
					txt: '荧光增白剂增白增艳原理及其安全性介绍',
				},
				{
					id: 9,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604283238417_2%20%E8%93%9D%E6%9C%88%E4%BA%AE%E4%BA%AE.jpg',
					txt: '蓝月亮亮白增艳洗衣液添加荧光增白剂的原因和种类',
				},
				{
					id: 10,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604284566756_3%20%E3%80%8A%E8%93%9D%E6%9C%88%E4%BA%AE.jpg',
					txt: '蓝月亮亮白增艳洗衣液可否洗婴幼儿衣物和贴身衣物？',
				},
				{
					id: 11,
					src: 'https://mall-oss.bluemoon.com.cn/officialwebsite/website/pro/1604284681600_4%20%E3%80%8A%E8%93%9D%E6%9C%88%E4%BA%AE.jpg',
					txt: '蓝月亮关于亮白增艳洗衣液的声明',
				},
			],
			list4: [
				{
					id: '12',
					src: 'http://www.bluemoon.com.cn/_nuxt/img/icon_phone_unselect.6630446.png',
					txt: '客服热线',
				},
				{
					id: '13',
					src: 'http://www.bluemoon.com.cn/_nuxt/img/icon_message_unselect.37bf2af.png',
					txt: '在线咨询',
				},
				{
					id: '14',
					src: '',
					txt: '回顶部',
				},
			],
		}
	},
}
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
ul,
li {
	list-style: none;
}
img {
	width: 100%;
}
.topImg-w {
	width: 100%;
	position: relative;
	.topzi-w {
		position: absolute;
		right: 0;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		color: #fff;
		margin: auto;
		line-height: 41px;
		font-weight: 700;
		height: fit-content;
		width: fit-content;
		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
		font-size: 26px;
	}
	.topzi-w:before {
		content: '';
		position: absolute;
		top: 20px;
		width: 30px;
		height: 1px;
		background: #fff;
		left: -60px;
	}
	.topzi-w:after {
		content: '';
		position: absolute;
		top: 20px;
		width: 30px;
		height: 1px;
		background: #fff;
		right: -60px;
	}
}
.content {
	max-width: 85vw;
	margin: 0 auto;
	padding-bottom: 80px;
	.bar {
		display: flex;
		background: #fff;
		max-width: 85vw;
		margin: 0 auto;
		padding-top: 45px;
		padding-bottom: 30px;
		align-items: flex-end;
		width: 100%;
		position: relative;
		font-size: 16px;
		font-weight: 400;
		transition: border-color 0.2s;
		.nav {
			display: flex;
			border-bottom: 1px solid #f0f1f2;
			li {
				padding-bottom: 9px;
				margin-right: 66px;
				a {
					color: black;
				}
			}
			li:nth-child(3) {
				margin-right: 0px;
			}
			.active {
				color: #1d3e97;
				border-bottom: 2px solid #1d3e97;
			}
		}
		.search {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: flex-end;
			height: 44px;
			.search_box {
				padding-left: 8px;
				width: 205px;
				height: 26px;
				border-radius: 13px;
				background-color: #f1f1f1;
				transition: flex 0.5s;
				display: flex;
				align-items: center;
				.icon_search {
					display: block;
					width: 16px;
					height: 16px;
					background: url('')
						no-repeat 50% / contain;
				}
				input {
					box-sizing: border-box;
					padding-left: 8px;
					flex: 1;
					height: 26px;
					background-color: transparent;
					font-size: 14px;
					color: #333;
					border: 0;
				}
			}
			.search_btn {
				display: flex;
				justify-content: center;
				min-width: 78px;
				span {
					font-size: 17px;
					font-weight: 700;
					color: #0349c3;
					cursor: pointer;
				}
			}
		}
	}
	.listyong {
		margin-top: 50px;
		margin-bottom: 4%;
		.wash_list {
			color: #1d3e97;
			font-size: 50px;
			opacity: 0.5;
			margin-bottom: 4%;
			font-weight: 500;
		}
		.wash_content {
			display: flex;
			flex-wrap: wrap;
			.ti {
				width: 30%;
				margin-bottom: 40px;
				background-color: #f2f2f2;
				color: #666;
				font-size: 0;
				transition: all 0.3s ease-out;
				cursor: pointer;
				margin-right: 3.5%;
				.ti_zi {
					padding: 12%;
					.ti_zi_c {
						font-size: 18px;
						height: 46px;
						word-break: break-all;
					}
				}
			}
			.ti:hover .ti_zi {
				background: #1d3e97;
			}
			.ti:nth-child(3) {
				margin-right: 0px;
			}
			.ti:hover {
				color: #fff;
				transform: scale(1.05);
			}
		}
	}
}
</style>
